本站 - 文章
本文主要记录本站文章相关的一些自动化配置与功能说明,例如 Front Matter 的自动生成、文章评论系统的集成,以及侧边目录的显示规则。
Front Matter 自动生成
Front Matter 是位于每篇文章顶部的元数据块。为了提升写作效率,本站集成了一套自动化脚本:当您新建一篇文章且未添加 Front Matter 时,系统会在本地预览时自动为您生成,包含 date、title、permalink 和 categories 四个基础字段。
关于 title 和文件名
文章的 title 字段由文件名自动生成,因此,在创建文件时建议遵循以下规范:
- 编号:使用数字前缀(如
01.、02.)为文件命名,便于管理和排序。 - 命名:推荐使用简短的英文或中文拼音,避免使用空格(URL 中会转义为
%20,不美观),可使用连字符-连接单词。 - 长度:文件名不宜过长,以防在编辑器侧边栏中显示不全,影响导航。
系统自动生成的 title 后,您可以手动修改。同样,title 也不宜过长,因为它会直接作为网站侧边栏的导航标题。若您需要一个更详细的完整标题,可以在 Front Matter 下方使用一级标题(#)来呈现。
关于 categories
文章的 categories(分类)字段同样支持自动填充:
- 自动填充:若
categories字段为空,系统会根据文章所在的文件夹结构自动填充。- 一级目录:文章若位于一级目录下,则分类取该目录的名称。
- 二级目录:文章若位于二级目录下,则分类会同时包含一级和二级目录的名称。
- 手动优先:若您已手动为
categories字段赋值,系统将不会进行任何修改,尊重您的自定义设置。
文章评论系统
本站集成了 Twikoo 作为评论系统,其配置分为前端与后端两部分。
- 后端服务:部署在 Vercel 平台上,具体部署细节可参考 Twikoo 官方文档。
- 前端集成:已作为内置功能集成。您只需在
.vitepress/config.mts文件中,根据文档说明填入您的 Twikoo 环境 ID 即可启用。
文章目录(大纲)
文章页面右侧的导航目录,在 VitePress 中被称为“大纲 (Outline)”。其显示层级由 VitePress 默认主题的 outline 属性控制。
您可以在 .vitepress/config.mts 文件中进行如下配置:
ts
import { defineConfig } from "vitepress";
import shared, { teekConfig } from "./locales/shared";
import zh from "./locales/zh";
import en from "./locales/en";
// VitePress Configurations {{{1
export default defineConfig({
...shared,
locales: {
root: { label: "简体中文", ...zh },
"/zh/": { label: "简体中文", ...zh },
"/en/": { label: "English", ...en },
},
rewrites: {
"zh/:rest*": ":rest*",
},
description: "A VitePress Site",
// head: [
// // {{{2
// [
// "link",
// {
// rel: "icon",
// type: "image/png",
// sizes: "32x32",
// href: "/img/favicon.ico",
// },
// ],
//
// // import font-awesome so you could use its icons on your website
// [
// "link",
// {
// rel: "stylesheet",
// href: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css",
// },
// ],
// ], // 2}}}
themeConfig: {
// {{{
// logo: "/favicon/logo.png",
socialLinks: [{ icon: "github", link: "https://github.com/Alowree/marapython-teek" }],
// search: {
// provider: "local",
// },
}, // }}}
extends: teekConfig,
});通过以上设置,文章的右侧目录将仅展示 H2 至 H4 级别的标题,提供更聚焦的导航体验。